<template>
  <Modal :value="show" @on-visible-change="changeModal" title="修改密码" width="600">
    <Form :label-width="120" :model="form" ref="form" :rules="rules">
      <Row :gutter="32">
        <Col :md="22">
          <FormItem label="登录名">
            <Input v-model="employee.loginName" placeholder="请输入登录名" :disabled="true"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col :md="22">
          <FormItem label="旧密码" prop="oldPass">
            <Input type="password" v-model="form.oldPass" :maxlength="20" placeholder="请输入旧密码"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col :md="22">
          <FormItem label="新密码" prop="newPass">
            <Input type="password" v-model="form.newPass" :maxlength="20" placeholder="请输入新密码"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col :md="22">
          <FormItem label="确认新密码" prop="confirmPass">
            <Input type="password" v-model="form.confirmPass" :maxlength="20" placeholder="请再次输入新密码"></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <div slot="footer">
        <Button @click="close">取消</Button>
        <Button type="primary" :loading="isModalLoading" @click="submit">保存</Button>
    </div>
  </Modal>
</template>

<script>
  import {mapState,mapActions,mapMutations} from 'vuex'
  import {post} from '@/util/request'

  export default {
    props:['employee','show'],
    data(){
      return {
        isModalLoading:false,
        form:{
          oldPass:'',
          newPass:'',
          confirmPass:''
        },
        rules:{
          oldPass:{required:true,message:'请填写旧密码',trigger:'blur'},
          newPass:[
            {required:true,message:'请填写新密码',trigger:'blur'},
            {min:6,max:20,message:'密码长度为6-20位',trigger:'blur'}
          ],
          confirmPass:[
            {required:true,message:'请再次输入新密码',trigger:'blur'},
            {validator:(rule,value,callback) =>{
              if (this.form.newPass){
                if (this.form.newPass !== value){
                  return callback(new Error('两次输入不匹配'));
                }
              }
              return callback();
            },trigger:'blur'}
          ]
        }
      }
    },
    computed:{

    },
    methods:{
      changeModal(v){
        !v && this.close();
      },
      close(){
        this.form = {oldPass:'',newPass:'',confirmPass:''};
        this.$refs.form.resetFields();
        this.$emit('close');
      },
      async submit(){
        let v = await this.$refs.form.validate();
        if (v){
          this.isModalLoading = true;
          let data = {oldPass:this.form.oldPass,newPass:this.form.newPass};
          let res = await post('/auth/employee/updatePassWord',data);
          this.isModalLoading = false;
          if (res.data.success){
            this.$Message.success('修改成功');
            this.$emit('success');
            this.close();
          }else{
            this.$Message.error(res.data.msg);
          }
        }
      }
    }
  };
</script>
